<template>
<div>
  <div class="title">
    <router-link to="/index"><span style="color: #fff">关闭</span></router-link>
    <h3> 所有栏目</h3>

  </div>
  <div class="mine">
    <h3>我的栏目</h3>
    <ul>
      <li v-for="(item,index) in list" :key="index" @click="del(index)">{{item.name}}</li>
    </ul>
  </div>
  <div class="more">
    <h3>更多栏目</h3>
    <ul>
      <li v-for="(item,index) in unNewsList"  @click="add(item)" :key="index">{{item.name}}</li>
    </ul>
  </div>
</div>
</template>

<script>
import {newsList, newsOrder} from '../api/api'
export default {
name: "newsDetail",
  data(){
    return{
      list:[{name:'新闻',categoryId:2}],
      newList:[],
      orderList:[]
    }
  },
  created() {
    newsList().then(res=>{
      // console.log(res)
      this.newList = res.rows
    })
    this.list = this.$store.state.newList
    // console.log(this.list)
  },
  computed: {
     unNewsList(){
           return this.newList.filter(item => !this.list.some(listItem => listItem.categoryId === item.categoryId))
     }
  },
  methods:{
    add(item){
      // console.log(this.orderList)
      this.list.push(item)
      this.$store.commit('changnewList',this.list)
      // console.log(this.$store.state.newList)
      // for(let i = 0;i<this.list.length;i++){
      //   this.orderList.push(this.list[i].categoryId)
      // }
      this.orderList.unshift(item.categoryId)
      // console.log(this.orderList)
      let sub = this.orderList.join(",")
      // console.log(sub)
      newsOrder(sub).then(res=>{
        console.log(res)
      })
    },
    del(index){
      if(this.list.length!=1){
        this.list.splice(index,1)
        this.$store.commit('changnewList',this.list)
        // console.log(this.$store.state.newList)
        this.orderList.shift(index)
        // console.log(this.orderList)
        let sub = this.orderList.join(",")
        newsOrder(sub).then(res=>{
          console.log(res)
        })
      }
    },
  }


}
</script>

<style scoped lang="less">
  .title{
    height: 40px;
    line-height: 40px;
    background: #00aaff;
    color: white;
    //padding: 5px 20px;
    text-align: center;
    position: relative;
    span{
      float: left;
      margin-left: 20px;
    }
    h3{
      color: white;
      position: absolute;
      left: 40%;
    }

  }
  .mine,
  .more{
    height: calc((100vh - 40px)/2);
    padding: 10px;
    box-sizing: border-box;
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        width: calc(100% / 4);
        text-align: center;
        margin: 5px 12px;
        border-radius: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
      }
    }
  }
</style>